<template>
    <BaseParam :label="label" :help="help">
        <el-switch
            v-model="switchValue"
            :active-text="config?.activeText"
            :inactive-text="config?.inactiveText"
            :active-value="config?.activeValue ?? true"
            :inactive-value="config?.inactiveValue ?? false"
            @change="handleChange"
        />
    </BaseParam>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { BaseParam } from './index';

const props = defineProps<{
    modelValue?: boolean;
    label: string;
    help?: string;
    config?: {
        activeText?: string;
        inactiveText?: string;
        activeValue?: any;
        inactiveValue?: any;
    };
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void;
}>();

const switchValue = ref(props.modelValue ?? false);

watch(() => props.modelValue, (newValue) => {
    switchValue.value = newValue ?? false;
});

const handleChange = (value: boolean) => {
    emit('update:modelValue', value);
};
</script> 